<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>让坦克开起来</title>
	<style>
		body{
			background-image: url(img/grassland.png);
		}
		#mytank{
			
			position: absolute;
			left: 10px;
			top: 100px;
		}
	</style>
</head>
<body>
	<img src="img/right.png" id="mytank">
</body>
 
<script>

	var Omg  = document.querySelector('img')

	var style = getComputedStyle(Omg)
	
	var L = parseInt(style.left)
	var T = parseInt(style.top)
	window.document.oncontextmenu = function(){     
		return false
	}
	// 控制方向键
	window.onkeydown = function(e){
		switch(e.key){
			case "w":
			case 'ArrowUp':
				Omg.src="img/up.png"
				T=T-10
				Omg.style.top = T + 'px'
				break;
 
			case "s":
			case 'ArrowDown':
				Omg.src="img/down.png"
				T=T+10
				Omg.style.top = T + 'px'
				break;
 
			case "a":
			case 'ArrowLeft':
				Omg.src="img/left.png"
				L=L-10
				Omg.style.left = L + 'px'
				break;
 
			case "d":
			case 'ArrowRight':
				Omg.src="img/right.png"
				L=L+10
				Omg.style.left = L + 'px'
				break;
		}
		
	}
	
</script>
</html>
